<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 800px;
            /* height: 400px; */

            /* 加给table的属性 */

            /* border-spacing 单元格之间的间距 */
            border-spacing: 5px;

            /* 
                border-collapse 边框合并
                            separate  (分开=> 不合并  默认)
                            collapse  (合并)
            */

            /* border-collapse: separate; */
            /* border-collapse: collapse; */


            /* 
                默认情况下,浏览器会根据单元格内容的宽度来自适应分配空间(内容多的分的多), 如果向等比例均分空间 
                table-layout: auto;   // 自动分配 (内容多的分的多)
                table-layout: fixed;  // 固定分配 (等比例均分空间 )
            */

            table-layout: auto;
            table-layout: fixed;

            /* 文本对齐方式 */
            text-align: center;
            /* 行高 => 一行文本占据的高度 */
            line-height: 40px;



        }

        /* 群组选择器: 同时选中多个元素,添加样式 */
        table, td{
            /* 边框: 变量的宽度  边框的样式(实线)  边框的颜色 */
            border: 1px solid black;
        }

        td{
            /* empty-cells: 空白单元格(没有内容)是否显示   (不能和table中的border-collapse 一起使用)
                    show  默认显示
                    hide  隐藏

            */
            /* empty-cells: show; */
            empty-cells: hide;
        }
    </style>
</head>
<body>
    <!-- 
        表格标签:  table(表格)  tr(表格行)  td(表格的单元格)
        标签内的属性:   
            <table align="center" width="800px" height="400px" border="1px" cellspacing="0px" cellpadding="0px"></table>

            width="800px"   表格宽度
            height="400px"  表格高度
            border="1px"    表格内边框宽度
            cellspacing="0px"   单元格之间的间距
            cellpadding="0px"   单元格和内容之间的间距
            align="left/center/right"      水平对齐方式 (a:加给table控制表格相对于页面的对齐方式  b. 加给tr和td控制单元格内的文本相对于单元格的对齐方式)

        


        表格和表格的高级属性(css属性):

            加给table的css属性
                border-spacing 单元格之间的间距
                border-collapse 边框合并
                                separate  (分开=> 不合并  默认)
                                collapse  (合并)
                table-layout 默认情况下,浏览器会根据单元格内容的宽度来自适应分配空间(内容多的分的多), 如果向等比例均分空间 
                    table-layout: auto;   // 自动分配 (内容多的分的多)
                    table-layout: fixed;  // 固定分配 (等比例均分空间 )

            加给td的css属性
                empty-cells: 空白单元格(没有内容)是否显示   (不能和table中的border-collapse 一起使用)
                    show  默认显示
                    hide  隐藏


        JS动态生成之前,需要先写静态的
     -->
    <!-- table>tr*9>td*9{$} -->
    <table>
        <tr >
            <td>1</td>
            <td>22222222222222222222222222222</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>


    
   
</body>
<script>
    document.write("<table>");



    table.innerHTML="<tr>"


</script>
</html>